<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <META HTTP-EQUIV="pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-store, must-revalidate">
    <META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
    <META HTTP-EQUIV="expires" CONTENT="0">
    <title>新增工单</title>
    <link rel="stylesheet" type="text/css" href="./css/main.css" />
    <link rel="stylesheet" type="text/css" href="./layui/css/layui.css" />
    <link rel="stylesheet" type="text/css" href="./css/layuiAdminTheme.css" />
    <link rel="stylesheet" href="layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="css/public.css" media="all" />

    <style type="text/css">
    </style>
  </head>
  <body>

    <script src="./js/main.js" charset="utf-8"></script>
<!--    <script src="https://cdn.jsdelivr.net/npm/jquery" charset="utf-8"></script>-->
    <script src="./layui/layui.js" charset="utf-8"></script>
    <script src="./js/jQuery.main.js"></script>
    <script src="./js/xm-select.js" type="text/javascript" charset="utf-8"></script>

    <form class="layui-form" action="" lay-filter="data">
      <div class="layui-form-item">
          <label class="layui-form-label" style="width: 7em;">工单号：</label>
          <input type="text" name="orderNum" lay-verify="required" autocomplete="" class="layui-input" style="width: 18em;"
                 placeholder="请输入工单号">
      </div>
      <div class="layui-form-item">
        <div class="layui-block">
          <label class="layui-form-label" style="width: 7em;">产品类型：</label>
          <div class="layui-input-inline " style="width: 18em">
          <select name="productType" id="productType" lay-verify="required" lay-filter="productType">
            <option value="主产品">主产品</option>
            <option value="半成品">半成品</option>
          </select></div>
<!--          <input type="text" name="productType" lay-verify="required" autocomplete="" class="layui-input" style="width: 18em;"-->
<!--            placeholder="请输入产品类型">-->
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-block">
          <label class="layui-form-label" style="width: 7em;">物料编码：</label>
          <input type="text" name="materialCode" lay-verify="required" autocomplete="" class="layui-input" style="width: 18em;"
            placeholder="请输入物料编码">
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-block">
          <label class="layui-form-label" style="width: 7em;">物料名称：</label>
          <input type="text" name="materialName" lay-verify="required" autocomplete="" class="layui-input" style="width: 18em;"
            placeholder="请输入物料名称">
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-block">
          <label class="layui-form-label" style="width: 7em;">物料型号规格：</label>
          <input type="text" name="materialModel" lay-verify="required" autocomplete="" class="layui-input" style="width: 18em;"
                 placeholder="请输入物料型号规格">
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-block">
          <label class="layui-form-label" style="width: 7em;">计划数量：</label>
          <input type="text" name="amountPlan" lay-verify="required" autocomplete="" class="layui-input" style="width: 18em;"
                 placeholder="请输入数量">
        </div>
      </div>

      <div class="layui-form-item">
        <div class="layui-block">
          <label class="layui-form-label" style="width: 7em;">单位：</label>
          <input type="text" name="unit" lay-verify="required" autocomplete="" class="layui-input" style="width: 18em;"
                 placeholder="请输入单位">
        </div>
      </div>

      <div class="layui-form-item">
        <label class="layui-form-label" style="width: 7em;">部门：</label>
        <div class="layui-input-inline " style="width: 15em">
          <select name="deptName" id="deptName" lay-verify="required" lay-filter="deptName">
          </select>
        </div>
      </div>

      <div class="layui-form-item">
        <div class="layui-block" style="width: 7em;"><label class="layui-form-label">选择工序：</label></div>
        <div class="layui-input-inline" style="width: 7em;"><div id="process" lay-filter="process" style="width: 45em;" ></div></div>
      </div>

      <div class="layui-form-item">
        <label class="layui-form-label"></label>
        <button id="checkSave" type="button" class="layui-btn" lay-filter="checkSave">新增工单</button>
      </div>
    </form>

    <div id="addBox"  class="site-text" style="margin: 5%; display: none"></div>


    <script type="text/javascript" src="layui/layui.js"></script>
    <script type="text/javascript">
      var form = null;
      let isAd=null;
      let thisDept=null;
      var list = [];


      layui.use(['form',"layer"], function() {
        form = layui.form;
        $.ajax({
          url: url + '/sys-dept/listDept',
          method: 'POST',
          async : false,
          contentType: 'application/json',
          success: function(res) {
            //显示前先判断是否为管理员
            $.ajax({
              url: '/sys-user/getAdmin/'+sessionStorage.getItem('userId'),
              method: 'GET',
              async : false,
              contentType: 'application/json',
              success: function (res) {
                if (res.code===200){
                  isAd=1;
                }
                else if (res.code===400){
                  isAd=0;
                  thisDept=res.data.dept;
                }
              }
            })
            //按照是否为管理员显示下拉框
            if (res.code == 200) {
              for (var i = 0; i < res.data.length; i++) {
                if(isAd===1){
                  $("#deptName").append("<option value='" + res.data[i].id + "'>" + res.data[i].dept +"</option>");
                }else if (isAd===0&&res.data[i].dept===thisDept){
                  $("#deptName").append("<option selected='selected' value='" + res.data[i].id + "'>" + res.data[i].dept +"</option>").attr('disabled','disabled');
                }
              }
              form.render('select');
            }
          }
        })
        //用户下拉框默认化
        $.ajax({
          url: url + '/sys-user/userList',
          method: 'POST',
          async : false,
          contentType: 'application/json',
          data: JSON.stringify({
            userId:"",
            deptId: $('#deptName').val()
          }),
          success: function(res) {
            if (res.code == 200) {
              for (var i = 0; i < res.data.length; i++) {
                $("#nowWorker").append("<option value='" + res.data[i].loginName + "'>" + res.data[i].userName +
                        "</option>");
              }
              form.render('select');
            }
          }
        })


        $("#checkSave").click(function () {
          var data = form.val('data');
          if(isNotEmptyObject(data)) {//不为空
            $("#addBox").empty();
            var workerList = [];
            var allProcessId = data.process.split(",");//工序id数组
            var allProcessName = getProcess(data.process);//工序名
            var allProcessNames = allProcessName.split(";");//工序名数组
            allProcessNames.pop();//去除空
            //定义弹出层
            var trs = '';
            trs += '<div class="page-content layui-collapse">';
            trs += '<div class="supplier_style layui-colla-item">';
            trs += '<div class="info_Content" style="font-size: 15px">';
            trs += '<h2 class="layui-colla-title"><b style="color: #f5222d">工单信息</b></h2>';
            trs += '<div class="layui-colla-content layui-show">';
            trs += '<ul class="Content_list clearfix">';
            // trs += '<label class="label_name" style="line-height: 2"><b style="color: #f5222d">——上报记录'+j+':             </b></label>';
            trs += '<li style="line-height:2.5"><label class="label_name"><b>●  产品类型:             </b></label><span style="color: #1890ff">' + data.productType + '</span></li>';
            trs += '<li style="line-height:2.5"><label class="label_name"><b>●  物料编码:                  </b></label><span style="color: #1890ff">' + data.materialCode + '</span></li>';
            trs += '<li style="line-height:2.5"><label class="label_name"><b>●  物料名称:                  </b></label><span style="color: #1890ff">' + data.materialName + '</span></li>';
            trs += '<li style="line-height:2.5"><label class="label_name"><b>●  下达车间:             </b></label><span style="color: #1890ff">' + data.workshop + '</span></li>';
            trs += '<li style="line-height:2.5"><label class="label_name"><b>●  计划数量:                      </b></label><span style="color: #1890ff">' + data.amountPlan + '</span></li>';
            trs += '<li style="line-height:2.5"><label class="label_name"><b>●  单位:                      </b></label><span style="color: #1890ff">' + data.unit + '</span></li>';
            trs += '<li style="line-height:2.5"><label class="label_name"><b>●  部门:                 </b></label><span style="color: #1890ff">' + $('#deptName option:selected').text() + '</span></li>';
            trs += '<li style="line-height:2.5"><label class="label_name"><b>●  所需工序:                    </b></label><span style="color: #1890ff">' + allProcessName + '</span></li>';
            trs += '</ul>';
            trs += '</div>';
            trs += '</div>';
            trs += '</div>';
            trs += '</div>';
            trs += '<div style="margin: 15px">';
            for (var i = 0; i < allProcessId.length; i++) {
              trs += '<div class="layui-row layui-col-space10">';
              trs += '<div class="layui-col-md6" style="width: 12em"><label class="layui-form-label" style="white-space:nowrap!important;"><b style="color: #01AAED">' + allProcessNames[i] + '</b>人员指派：</label></div>' +
                      '<div class="layui-col-md6"  style="width: 19em"  name="nowWorker' + i + '" id="nowWorker' + i + '" lay-verify="required" lay-filter="nowWorker">' +
                      '</div>';
              trs += '</div>'
            }
            trs += '</div>'
            trs += '<div align="center" style="margin: 10px">' +
                    '<button id="save" type="submit" class="layui-btn layui-btn-normal" lay-submit="" lay-filter="save"><b>确认新增</b></button>' +
                    '<button class="layui-btn layui-btn-danger" onclick="layer.close(layer.index)"><b>关闭</b></button>' +
                    '</div>';
            $("#addBox").append(trs);
            //弹出确认框
            layer.open({
              type: 1,
              title: '确认工单信息',
              maxmin: true,
              shadeClose: true, //点击遮罩关闭层
              area: ['600px', '700px'],
              content: $('#addBox'),
              end: function () {
                $('#addBox').css('display', 'none')
              }
            });

            //获取用户下拉框
            for (var a = 0; a < allProcessId.length; a++) {
              var elStr = '#nowWorker' + a
              var nameStr = '#nowWorker' + a
              var userOptions = {
                el: elStr,
                name: nameStr,//表单的name属性
                filterable: true,
                id: 'chooseWorker',
                layVerify: 'required',//必填项
                //layVerType: 'tips',//提示类型 同layui
                tips: '请选择人员...',
                toolbar: {//工具条,全选,清空,反选,自定义
                  show: true,
                  list: [
                    'ALL',
                    'CLEAR',
                    'REVERSE',
                    {
                      name: '(★)',
                      icon: 'el-icon-star-off',
                    }
                  ]
                },
                data: [],
              };

              var userInfo = xmSelect.render(userOptions)
              var userData = [];
              $.ajax({
                url: url + '/sys-user/userList',
                method: 'POST',
                async: false,
                contentType: 'application/json',
                data: JSON.stringify({
                  userId: "",
                  deptId: $('#deptName').val()
                }),
                success: function (res) {
                  //data是ajax 异步获取的
                  for (var i = 0; i < res.data.length; i++) {
                    userData.push({
                      name: res.data[i].userName,
                      value: res.data[i].loginName
                    });
                  }
                  //模拟通过ajax 获取json数据,异步更新多选下拉框的值

                }
              })
              userInfo.update({data: userData})
            }

            //提交
            form.on('submit(save)', function () {
              for (var j = 0; j < allProcessNames.length; j++) {
                var str = "#nowWorker" + j;
                workerList[j] = xmSelect.get(str, true).getValue('valueStr');
              }
              data.userId = sessionStorage.getItem('userId');
              data.deptId = $('#deptName').val();
              data.nowWorker = $('#nowWorker option:selected').text();
              data.workerNo = $('#nowWorker').val();
              data.workerList = workerList;
              let confirm1 = layer.confirm('确定新增工单吗？', {
                btn: ['确定', '取消']
              }, function () {
                $.ajax({
                  url: url + '/work-order/save',
                  method: 'POST',
                  contentType: 'application/json',
                  data: JSON.stringify(data),
                  success: function (res) {
                    parent.layer.alert(res.msg);
                    if (res.code == 200) parent.switchNav(0);
                  }
                })
                layer.close(confirm1);
              }, function () {
                layer.close(confirm1);
              })
            });
          }else {
            layer.alert('请输入完整信息！', {
              icon: 5,
              skin: 'layer-ext-demo'
            })
          }
        })

        //下拉框二级联动
        form.on('select(deptName)', function(data) {
          //工序下拉框联动
          var processOptions = {
            el: '#process',
            name: 'process',//表单的name属性
            filterable: true,
            id: 'myProcess',
            layVerify: 'required',//必填项
            //layVerType: 'tips',//提示类型 同layui
            tips: '请选择工序...',
            toolbar: {//工具条,全选,清空,反选,自定义
              show: true,
              list: [
                'ALL',
                'CLEAR',
                'REVERSE',
                {
                  name: '(★)',
                  icon: 'el-icon-star-off',
                }
              ]
            },
            data: [],
          };

          var process = xmSelect.render(processOptions)

          setTimeout(function(){
            $.ajax({
              url: url + '/process-info/listProcess',
              method: 'POST',
              async : false,
              contentType: 'application/json',
              data: JSON.stringify({
                userId: sessionStorage.getItem('userId'),
                deptId: $('#deptName').val()
              }),
              success: function(res) {
                //data是ajax 异步获取的
                var data =[];
                for (var i = 0; i < res.data.length; i++) {
                  data.push({
                    name : res.data[i].processName,
                    value :res.data[i].id
                  });
                }
                //模拟通过ajax 获取json数据,异步更新多选下拉框的值
                process.update({data: data})
              }
            })
          },100);

          form=layui.form;
          form.render('select');
        });

      });

      //默认工序下拉框
      var processOptions = {
        el: '#process',
        name: 'process',//表单的name属性
        id: 'myProcess',
        layVerify: 'required',//必填项
        filterable: true,
        //remoteSearch: true, //自定义搜索
        //layVerType: 'tips',//提示类型 同layui
        tips: '请选择工序...',
        toolbar: {//工具条,全选,清空,反选,自定义
          show: true,
          list: [
            'ALL',
            'CLEAR',
            'REVERSE',
            {
              name: '(★请按顺序选取)',
              icon: 'el-icon-star-off',
            }
          ]
        },
        data: [],
      };

      var process = xmSelect.render(processOptions)

      setTimeout(function(){
        $.ajax({
          url: url + '/process-info/listProcess',
          method: 'POST',
          contentType: 'application/json',
          data: JSON.stringify({
            userId: sessionStorage.getItem('userId'),
            deptId: $('#deptName').val()
          }),
          success: function(res) {
            //data是ajax 异步获取的
            var data =[];
            for (var i = 0; i < res.data.length; i++) {
              data.push({
                name : res.data[i].processName,
                value :res.data[i].id
              });
            }
            //模拟通过ajax 获取json数据,异步更新多选下拉框的值
            process.update({data: data})
          }
        })
      },100);


    </script>
  </body>

</html>
